@import '../../style/theme/color';
@import '../../style/theme/shadow';
@import '../../style/theme/corner';

:host {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}

.devui-timepicker-panel {
  width: 115px; // 有1px边框
  height: 306px;
  text-align: center;
  border-left: 1px solid $devui-dividing-line;

  .devui-time-header {
    display: flex;
    height: 30px;
    padding: 0 12px;

    &-item {
      flex: 1;
      line-height: 30px;
      margin-right: 12px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .devui-time-picker {
    display: flex;
    height: 276px;
    width: 114px;
    padding: 0 12px;
    overflow: hidden;
    border-radius: $devui-border-radius $devui-border-radius 0 0;

    .devui-time-list {
      flex: 1;
      overflow-x: hidden;
      overflow-y: scroll;
      overflow-y: overlay;
      scroll-behavior: auto;
      padding-right: 12px;
      scrollbar-width: none;

      &:last-child {
        padding-right: 0;
      }

      &::-webkit-scrollbar {
        width: 0 !important;
      }

      &:hover {
        scrollbar-width: thin;

        &::-webkit-scrollbar {
          width: 4px !important;
        }
      }

      .devui-time-item {
        width: 100%;
        height: 22px;
        line-height: 22px;
        text-align: center;
        cursor: pointer;

        &:not(:last-child) {
          margin-bottom: 8px;
        }

        &:last-child {
          margin-bottom: 260px;
        }
      }
    }

    &:not(.devui-disabled) .devui-time-list .devui-time-item {
      &:hover {
        color: $devui-list-item-hover-text;
        background-color: $devui-list-item-hover-bg;
        border-radius: $devui-border-radius-feedback;
      }

      &.active {
        color: $devui-list-item-active-text;
        background-color: $devui-list-item-active-bg;
        border-radius: $devui-border-radius-feedback;
      }

      &.disabled {
        color: $devui-disabled-text;
        background-color: $devui-disabled-bg;
        border-radius: $devui-border-radius-feedback;
      }
    }
  }
}
